<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <search-form
      :showSuperButton="false"
      :showAddButton="false"
      :showColumnNumber="8"
      :exportFileName="$t('process.moOrderDetailList.exportFileName')"
    >
      <a-col :xl="4" :lg="7" :md="8" :sm="24">
        <a-form-item label="盘点单号">
          <a-input placeholder="请输入盘点单号" v-model="queryParam.stocktakingNo" allowClear></a-input>
        </a-form-item>
      </a-col>
      <a-col :xl="4" :lg="7" :md="8" :sm="24">
        <a-form-item label="盘点人">
          <a-input placeholder="请输入盘点人" v-model="queryParam.stocktakingBy" allowClear></a-input>
        </a-form-item>
      </a-col>

      <template #otherButton>
        <a-popconfirm title="确认生成盘点？" ok-text="确定" cancel-text="取消" @confirm="handleGen">
          <a-button type="primary" :loading="loading">生成盘点</a-button>
        </a-popconfirm>
      </template>
    </search-form>
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> {{ $t('selectedTxt') }}
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >{{ $t('itemTxt') }}
        <a style="margin-left: 24px" @click="onClearSelected">{{ $t('button.ClearTxt') }}</a>
      </div>
      <div class="fivs-all-box">
        <div class="fivs-all-contain">
          <fmsx-table
            ref="table"
            size="middle"
            :scroll="{ x: true }"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange
            }"
            class="j-table-force-nowrap"
            @change="handleTableChange"
          >
            <template slot="status" slot-scope="text">
              <a-tag color="blue" v-if="text == 10">待盘点</a-tag>
              <a-tag color="green" v-if="text == 20"> 已完成 </a-tag>
            </template>
            <span slot="action" slot-scope="text, record" class="fivs-all-action">
              <a-popover
                v-if="record.status == 10"
                placement="top"
                arrow-point-at-center
                overlayClassName="fivs-all-tip"
              >
                <template slot="content"> 下载 </template>
                <div class="fivs-all-btn fivs-all-PDF" @click="downloadFile(record.annexVo[0].path)"></div>
              </a-popover>
              <a-upload
                v-if="record.status == 10"
                name="file"
                :showUploadList="false"
                :multiple="false"
                :data="{ stocktakingNo: record.stocktakingNo }"
                :headers="tokenHeader"
                :action="importExcelUrl"
                @change="handleImportExcel"
              >
                <span class="fivs-all-btn fivs-all-up" style="margin-left: 10px"></span>
              </a-upload>
              <a-popover placement="top" arrow-point-at-center overlayClassName="fivs-all-tip">
                <template slot="content"> {{ $t('popover.infoTxt') }} </template>
                <div
                  class="fivs-all-btn fivs-all-xiangqing"
                  @click="handleDetail(record)"
                  style="margin-left: 10px"
                ></div>
              </a-popover>
            </span>
          </fmsx-table>
        </div>
      </div>
    </div>
    <!-- 表单区域 -->
    <j-modal
      title="盘点明细"
      v-if="visible"
      :visible="visible"
      fullscreen
      switchFullscreen
      @cancel="visible = false"
      :cancelText="$t('button.closeTxt')"
    >
      <template slot="footer">
        <a-button type="primary" @click="handleSubmit">{{ $t('button.submitTxt') }}</a-button>
        <a-button @click="visible = false">关闭</a-button>
      </template>
      <InventoryFrom ref="InventoryFrom" :disableSubmit="disableSubmit" @ok="handleOk" />
    </j-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import wipApi from '@/api/fmsx/wip'
import InventoryFrom from './InventoryFrom'

export default {
  name: 'inventoryLoss',
  mixins: [JeecgListMixin],
  components: { InventoryFrom },
  data() {
    return {
      disableSubmit: false,
      visible: false,
      dateRange: [],
      description: '盘点列表',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '盘点单号',
          align: 'center',
          dataIndex: 'stocktakingNo'
        },
        {
          title: '盘点人',
          align: 'center',
          dataIndex: 'stocktakingBy'
        },
        // {
        //   title: '是否有效',
        //   align: 'center',
        //   dataIndex: 'active',
        //   customRender: function (t) {
        //     return t === 'Y' ? '是' : '否'
        //   }
        // },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作人',
          width: 80,
          align: 'center',
          dataIndex: 'updateBy'
        },
        {
          title: '操作时间',
          align: 'center',
          sorter: true,
          width: 150,
          dataIndex: 'updateTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/prod-pre/make/makeStocktaking/list',
        exportXlsUrl: '/prod-pre/make/makeStocktaking/exportXls',
        importExcelUrl: '/prod-pre/make/makeStocktaking/uploadStocktaking'
      }
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}${this.url.importExcelUrl}`
    }
  },
  methods: {
    handleDetail(record) {
      this.disableSubmit = true
      this.visible = true
      this.$nextTick(() => {
        this.$refs.InventoryFrom.handleDetail(record)
      })
    },
    handleOk() {
      this.loadData(1)
      this.visible = false
    },
    handleSubmit() {
      this.$refs.InventoryFrom.submit()
    },
    handleImportExcel(info) {
      if (info.file.status === 'done') {
        this.loading = false
        if (info.file.response.success) {
          // this.$message.success(`${info.file.name} 文件上传成功`);
          if (info.file.response.code === 200) {
            this.disableSubmit = false
            this.visible = true
            this.$nextTick(() => {
              this.$refs.InventoryFrom.edit(info.file.response.result)
            })
          } else {
            this.$message.success(info.file.response.message || `${info.file.name} ${this.$t('uploadSucceed')}`)
          }
        } else {
          this.$message.error(`${info.file.name} ${info.file.response.message}.`)
        }
      } else if (info.file.status === 'error') {
        this.loading = false
        if (info.file.response.status === 500) {
          let data = info.file.response
          const token = Vue.ls.get(ACCESS_TOKEN)
          if (token && data.message.includes('Token失效')) {
            this.$error({
              title: '登录已过期',
              content: '很抱歉，登录已过期，请重新登录',
              okText: '重新登录',
              mask: false,
              onOk: () => {
                store.dispatch('Logout').then(() => {
                  Vue.ls.remove(ACCESS_TOKEN)
                  window.location.reload()
                })
              }
            })
          }
        } else {
          this.$message.error(`文件上传失败: ${info.file.msg} `)
        }
      }
    },
    handleGen() {
      this.loading = true
      wipApi.Inventory.gen({})
        .then((res) => {
          this.loadData(1)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped>
.fivs-all-action {
  display: block;
}
</style>
